<template>
  <div class="virtual-list">
    <div class="real-height-wrapper"></div>
    <div class="list-wrapper">
      <div class="wrapper-item" v-for="(item, index) in list" :key="index">
        <p class="item-word">{{ item.value }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import listData from "@/constants/data";

const list = listData.list;

/**
 * 1.能滚动，数据能显示。
 * 2.滚动加载新数据
 */
</script>

<style lang="less" scoped>
.virtual-list {
  height: 100%;
  overflow: auto;
  position: relative;
  .real-height-wrapper {
    height: 10000px;
    position: absolute;
    right: 0;
    left: 0;
    z-index: -1;
  }
}
</style>
